<template>
  <div class="mother-msg">
    <ul class="item">
      <li class="item-list" v-for="item in cate" :key="item.id">
        <a href="">
          <div class="img">
            <img :src="item.pic" alt="" />
          </div>
          <div>
            <div class="title">
              <div class="title-img">
                <div class="pic">
                  <img src="../../assets/tm.png" alt="" />
                </div>
                <span class="title-txt">{{ item.title }}</span>
              </div>
            </div>
            <div class="title-b">
              <div class="coupon">
                <span>券</span>
                {{ item.quanJine }}元
              </div>
            </div>
            <div class="price">
              <span>￥</span>
              <span class="juan">{{ item.jiage }}</span>
              <span>活动价</span>
              <span class="yuanjia">{{ item.yuanjia }}</span>
            </div>
            <div class="showname">
              <span>{{ item.shopName }}</span>
            </div>
            <div class="btn">
              <span
                >去购买
                <van-icon name="arrow" />
              </span>
              <span class="tobuy">{{ item.xiaoliang }}人已购</span>
            </div>
          </div>
        </a>
      </li>
    </ul>
  </div>
</template>
<script lang="ts">
import { defineComponent, computed } from "vue";
import { useStore } from "vuex";
export default defineComponent({
  setup() {
    const store = useStore();
    const cate = computed(() => store.state.mother.cate);
    return {
      cate,
    };
  },
});
</script>
<style lang="stylus" scoped>
.mother-msg {
  display: flex;
  height: 100%;
  width: 100%;
  flex: 1;
}

.item {
  height: 100%;
  width: 100%;

  .item-list {
    height: 1.1rem;
    background: #fff;
    border-radius: 0.16rem;
    padding: 0.1rem;
    margin: 0.2rem auto 0;
    position: relative;

    .btn {
      width: 0.7rem;
      height: 0.4rem;
      background: linear-gradient(90deg, #d65dff, #fe4aeb);
      box-shadow: 0 0.04rem 0.06rem 0 rgba(235, 73, 251, 0.25);
      border-radius: 2rem 0.04rem 0.04rem 2rem;
      position: absolute;
      bottom: 0.2rem;
      right: 0.1rem;
      border: 1px solid transparent;
      z-index: 1;
      padding-left: 0.28rem;
      display: flex;
      flex-direction: column;
      justify-content: center;

      span {
        position: absolute;
        top: 0.03rem;
        font-size: 0.12rem;
        font-weight: 500;
        color: #fff;
      }

      .tobuy {
        top: 0.2rem;
        white-space: nowrap;
      }
    }

    .showname {
      height: 0.34rem;
      font-size: 0.11rem;
      font-weight: 400;
      color: #888;
    }

    .price {
      list-style: none;
      margin: 0;
      padding: 0;
      border: 0;
      vertical-align: baseline;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      box-sizing: border-box;
      font-size: 0.12rem;
      color: #fe3738;
      margin-top: 0.05rem;

      .juan {
        font-size: 0.2rem;
        font-weight: 500;
        color: #fe3738;
        margin-right: 0.04rem;
      }

      .yuanjia {
        text-decoration: line-through;
        font-size: 0.14rem;
        color: #999;
        margin-left: 0.01rem;
      }
    }

    .title-b {
      display: flex;
      margin-bottom: 12px;
      align-items: center;

      .coupon {
        height: 0.15rem;
        background: linear-gradient(90deg, #ff8873, #ff4f4f);
        border-radius: 0.04rem;
        display: inline-block;
        line-height: 0.24rem;
        padding: 0 0.06rem 0 0.02rem;
        font-size: 0.1rem;
        color: #fff;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;

        span {
          height: 0.14rem;
          border: none;
          line-height: 0.14rem;
          display: inline-block;
          font-size: 0.1rem;
          font-weight: 400;
          color: #ff5351;
          background: #fff;
          border-radius: 0.02rem 0 0 0.02rem;
          text-align: center;
          margin-right: 0.06rem;
        }
      }
    }

    .title {
      height: 0.36rem;
      font-size: 0.14rem;
      color: #333;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: flex;
      align-items: center;
    }

    .title-img {
      height: 0.26rem;
      width: 100%;
      float: left;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      .title-txt {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-left: 0.05rem;
      }

      .pic {
        height: 0.13rem;
        width: 0.24rem;
        display: inline-block;

        img {
          height: 100%;
          width: 100%;
          display: block;
        }
      }
    }
  }

  a {
    .img {
      float: left;
      margin-right: 0.1rem;
      position: relative;
      width: 1rem;
      height: 1rem;
      border-radius: 0.1rem;

      img {
        width: 1rem;
        height: 1rem;
        border-radius: 0.1rem;
        display: block;
      }
    }
  }
}
</style>
